import "./index.less";
import { PageHeader } from "@/components";
import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { InfiniteScroll } from "antd-mobile";
import { getAddressBook } from "./service";

const exData = [
  { name: "张三", position: "物业经理", phone: "13333333333" },
  { name: "李四", position: "物业员一", phone: "18999999999" },
  { name: "王五", position: "物业员二", phone: "13888888888" },
  { name: "张三", position: "物业经理", phone: "13333333333" },
  { name: "李四", position: "物业员一", phone: "18999999999" },
  { name: "王五", position: "物业员二", phone: "13888888888" },
  { name: "张三", position: "物业经理", phone: "13333333333" },
  { name: "李四", position: "物业员一", phone: "18999999999" },
  { name: "王五", position: "物业员二", phone: "13888888888" },
  { name: "张三", position: "物业经理", phone: "13333333333" },
  { name: "李四", position: "物业员一", phone: "18999999999" },
  { name: "王五", position: "物业员二", phone: "13888888888" },
];

export default function AddressBook() {
  const navigate = useNavigate();
  const ContentRef = useRef(null);
  const [listData, setListData] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const getData = async () => {
    try {
      const res = await getAddressBook({
        companyId: "123",
        current: 1,
        size: "10",
      });
      if (res?.success) setListData(res?.data?.records);
    } catch (error) {
      console.log(error);
    }
  };

  async function loadMore() {
    let current = currentPage + 1;
    try {
      const res = await getAddressBook({
        companyId: "123",
        current: current,
        size: "10",
      });
      let datas = res?.data?.records || [];
      setListData((val) => [...val, ...datas]);
      setCurrentPage(res?.data?.current);
      setHasMore(false);
    } catch (error) {
      throw new Error("mock request failed");
    }
  }
  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="ab_contarnier">
      <div className="header-bg"></div>
      <PageHeader title="通讯录" goback={() => navigate("/")} />

      <div
        ref={ContentRef}
        className="ab_content"
        onScroll={() => {
          let scrollTop = ContentRef?.current?.scrollTop;
          let Dvalue =
            ContentRef?.current?.scrollHeight -
            ContentRef?.current?.clientHeight;
          if (scrollTop >= Dvalue) setHasMore(true);
        }}
      >
        {listData?.length > 0 &&
          listData?.map((item: any, index: number) => {
            return (
              <div className="ab_content_meta" key={`ab_content_meta_${index}`}>
                <div className="ab_cm_name">{item.workerName}</div>
                <div className="ab_cm_position">{item.post}</div>
                <div className="ab_cm_phone">{item.phone}</div>
              </div>
            );
          })}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
      </div>
    </div>
  );
}
